import '../sass/login.scss';

import {
  Button,
  Input,
  Form,
  Popup,
  Toast
} from 'react-vant';

import {
  useState
} from 'react';

import {
 useNavigate
} from 'react-router-dom';


import axios from 'axios';


function Login() {

  let navigate = useNavigate();

  //控制注册弹窗显示和隐藏
  let [visible, setVisible] = useState(false);

  //登录表单
  let [loginForm] = Form.useForm();

  //登录
  let login = values => {
    axios({
      method: 'post',
      url: '/login',
      data: {
        ...values
      }
    }).then(res => {
      

      //重置指定文本域内容
      // registerForm.resetFields(['phone', 'password']);

      //重置所有文本域内容
      registerForm.resetFields();

      Toast({
        message: res.data.msg
      })

      if (res.data.code == 200) {
        //为了防止其他开发者研究登录token, 可以将token进行切片, 再混入一些干扰项
        // let tk = res.data.token.split(/\./);
        // 

        localStorage.setItem('token', res.data.token);

        navigate('/menu');

      }

     
    }).catch(err => {
      
    })

  }

  //注册表单
  let [registerForm] = Form.useForm();

  //注册
  let register = values => {

    axios({
      method: 'post',
      url: '/register',
      data: {
        ...values
      }
    }).then(res => {
      

      //重置指定文本域内容
      // registerForm.resetFields(['phone', 'password']);

      //重置所有文本域内容
      registerForm.resetFields();

      Toast({
        message: res.data.msg
      })

      if (res.data.code === 100) {
        setVisible(false);
      }
    }).catch(err => {
      
    })
  }


  return (
    <div className="login">
      <h2 className="title">用户登录</h2>
      <div>
        <Form
          form={loginForm}
          onFinish={login}
          footer={
            <div style={{ margin: '16px 16px 0' }}>
              <Button round nativeType='submit' type='primary' block>
                登录
              </Button>
            </div>
          }
        >
          <Form.Item
            intro='输入11位手机号'
            rules={[{ required: true, message: '手机号不能为空' }, {pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误'}]}
            name='phone'
            label='手机号'
          >
            <Input placeholder='请输入手机号' />
          </Form.Item>
          <Form.Item
            intro='输入6-16位密码,支持数字字母下划线组合且以字母开头'
            rules={[{ required: true, message: '密码不能为空' }, {pattern: /^[A-Za-z]\w{5,15}$/, message: '密码格式错误'}]}
            name='password'
            label='密码'
          >
            <Input placeholder='请输入密码' type="password" />
          </Form.Item>
        </Form>

        <div className="btn-re">
          <Button round nativeType='button' type='default' block onClick={() => {setVisible(true)}}>注册</Button>
        </div>
      </div>

      <Popup visible={visible} onClose={() => setVisible(false)} position="bottom" closeable>
        <div style={{ padding: '30px 20px' }}>
        <Form
          form={registerForm}
          onFinish={register}
          footer={
            <div style={{ margin: '16px 16px 0' }}>
              <Button round nativeType='submit' type='primary' block>
                注册
              </Button>
            </div>
          }
        >
          <Form.Item
            intro='输入11位手机号'
            rules={[{ required: true, message: '手机号不能为空' }, {pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误'}]}
            name='phone'
            label='手机号'
          >
            <Input placeholder='请输入手机号' />
          </Form.Item>
          <Form.Item
            intro='输入6-16位密码,支持数字字母下划线组合且以字母开头'
            rules={[{ required: true, message: '密码不能为空' }, {pattern: /^[A-Za-z]\w{5,15}$/, message: '密码格式错误'}]}
            name='password'
            label='密码'
          >
            <Input placeholder='请输入密码' type="password" />
          </Form.Item>

          <Form.Item
            intro='输入1-10位昵称,支持中英文组合'
            rules={[{ required: true, message: '昵称不能为空' }, {pattern: /^[A-Za-z\u4e00-\u9fa5]{1,10}$/, message: '昵称格式错误'}]}
            name='nickName'
            label='昵称'
          >
            <Input placeholder='请输入昵称' />
          </Form.Item>
        </Form>
        </div>
      </Popup>
    </div>
  );
}

export default Login;